<template>
  <span
    v-if="url"
    class="nb-img-wrapper"
    :class="{block: display}"
    :style="{width: `${width}px`, height: `${width}px`, borderRadius: radius, backgroundImage: `url(${url})`}"
  ></span>
</template>

<script>
  export default {
    name: 'NbImg',
    data () {
      return {}
    },
    props: {
      width: {
        type: String,
        default: '10'
      },
      height: {
        type: String,
        default: '10'
      },
      radius: {
        type: String,
        default: '0'
      },
      url: String,
      display: Boolean
    },
    methods: {},
    mounted () {
    }
  }
</script>

<style lang="scss">
.nb-img-wrapper{
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
  .nb-img-wrapper.block{
    display: block !important;
  }
</style>
